<template>
	<view class="footprint">
		<view class="header">
			<view class="total">总计：{{ total }} 条</view>
			<view class="clear" @click="clearAll">一键清理</view>
		</view>
		<view v-for="(item, index) in list" :key="index" style="margin-top: 20rpx;">
			<view class="date">{{ item.date }}</view>
			<view class="goods-item" v-for="(item2, index2) in item.list" :key="index2">
				<image :src="item2.goods.slider_image" style="width: 160rpx;height: 160rpx;"></image>
				<view class="goods-info">
					<view class="goods-name line2">{{ item2.goods.name }}</view>
					<view class="goods-price">￥{{ item2.goods.price }}</view>
				</view>
			</view>
		</view>
		<view class="more" @click="more()" v-if="!isLast">加载更多</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				total: 0,
				seachForm: {
					page: 1,
					limit: 30
				},
				isLast: false
			}
		},
		mounted() {
			this.getMyFootprint()
		},
		methods: {
			// 获取足迹信息
			async getMyFootprint(type) {
				let res = await this.$api.user.footprint.get(this.seachForm)
				if (type == 'more') {
					this.list = this.list.concat(res.data.data)
				} else {
					this.list = res.data.data
				}
				
				this.total = res.data.page.total
				
				if (this.seachForm.page == res.data.page.last_page) {
					this.isLast = true
				}
			},
			more() {
				this.seachForm.page = this.seachForm.page + 1
				this.getMyFootprint('more')
			},
			// 一键清理
			async clearAll() {
				let res = await this.$api.user.clearFootprint.get()
				if (res.code == 0) {
					this.$tool.msg('清理成功')
					this.getMyFootprint()
				} else {
					this.$tool.msg(res.msg)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.footprint {
		padding: 20rpx;
		width: 100%;
		height: 100%;
		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			padding: 0px 20rpx;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			.clear {
				border: 1px solid $base-color;
				padding: 5px;
				border-radius: 60rpx;
				font-size: 24rpx;
				color: $base-color;
			}
		}
		.date {
			font-size: 32rpx;
			font-weight: bold;
		}
		.goods-item {
			background: #fff;
			border-radius: 20rpx;
			width: 100%;
			height: 160rpx;
			margin-top: 20rpx;
			display: flex;
		}
	}
	.goods-info {
		padding: 20rpx;
		width: calc(100% - 200rpx);
		font-size: 28rpx;
	}
	.goods-price {
		margin-top: 20rpx;
		color: $base-color;
	}
	.line2 {
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	.more {
		width: 160rpx;
		height: 40rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		text-align: center;
	}
</style>